<template>
  <div class="page">
    <div class="top">
      <div class="top_logo">
        <img src="@/assets/company_logo.svg" class="svg-icon height_32px" alt="">
      </div>
      <div class="top_content">
        <div class="top_content_left">
          <div class="top_menu_list">
            <div @click="handleRouterJump('/correspondence')" :class="['top_menu_item', routeName === 'correspondence' ? 'active' : '']">
              <img src="@/assets/correspondence.svg" class="svg-icon height_35px" alt="">
              <div class="selected-item"></div>
            </div>
            <div @click="handleRouterJump('/cribs')" :class="['top_menu_item', routeName === 'cribs' ? 'active' : '']">
              <img src="@/assets/cribs.svg" class="svg-icon height_20px" alt="">
              <div class="selected-item"></div>
            </div>
          </div>
        </div>
        <div class="top_content_balance">
          <div class="balance_box">
            {{ $t('Start Balance')}}
          </div>
          <div class="balance_icon" @click="handleOpenBalance">
            <img src="@/assets/chart.svg" class="svg-icon height_35px" alt="">
          </div>
        </div>
        <div class="top_content_right">
          <img alt="" class="svg-icon height_27px" src="@/assets/info.svg">
          <img alt="" class="svg-icon height_27px" src="@/assets/site.svg">
          <img alt="" class="svg-icon height_27px" src="@/assets/notifications.svg">
          <el-dropdown @command="handleDropdown">
            <img alt="" class="svg-icon height_32px" src="@/assets/apps.svg" style="margin-left: 5px">
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="sender" v-if="showPermission('SENDER')">
                <div style="display: flex;align-items: center">
                  <img style="margin-right: 3px" alt="" class="svg-icon height_35px" src="@/assets/sender.svg">
                  Sender
                </div>
              </el-dropdown-item>
              <el-dropdown-item command="profiles" v-if="showPermission('PROFILES')">
                <div style="display: flex;align-items: center">
                  <img style="margin-right: 3px"  alt="" class="svg-icon height_35px" src="@/assets/profiles.svg">
                  Profiles
                </div>
              </el-dropdown-item>
              <el-dropdown-item command="settings" v-if="showPermission('SETTINGS')">
                <div style="display: flex;align-items: center">
                  <img style="margin-right: 3px"  alt="" class="svg-icon height_35px" src="@/assets/settings.svg">
                  Settings
                </div>
              </el-dropdown-item>
              <el-dropdown-item command="icebreakers" v-if="showPermission('ICEBREAKERS')">
                <div style="display: flex;align-items: center">
                  <img style="margin-right: 3px"  alt="" class="svg-icon height_35px" src="@/assets/icebreakers.svg">
                  I.B.
                </div>
              </el-dropdown-item>
              <el-dropdown-item command="news-feed" v-if="showPermission('NEWS_FEED')">
                <div style="display: flex;align-items: center">
                  <img style="margin-right: 3px"  alt="" class="svg-icon height_35px" src="@/assets/news-feed.svg">
                  N.F.
                </div>
              </el-dropdown-item>
              <el-dropdown-item command="personal-setting">
                <div style="display: flex;align-items: center">
                  <img style="margin-right: 3px"  alt="" class="svg-icon height_35px" src="@/assets/personal-settings.svg">
                  P.S.
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <img alt="" class="svg-icon height_32px" src="@/assets/logout.svg" @click="handleLogout">
        </div>
      </div>
    </div>
    <div class="main">
      <router-view/>
    </div>
    <el-dialog
        top="10vh"
        :visible.sync="dayDialog"
        width="97.357rem">
      <div class="day-dialog-box">
        <div class="year-header">
          <div class="year-list">
            <div class="year">
              {{ year }}
            </div>
            <div class="month-list">
              <div @click="handleChangeMonth(item.id)" v-for="item in monthList" :class="['month', month === item.id ? 'active' : '']">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="day-content">
          <div class="left">
            <div class="calendar-header">
              <div class="header-item" v-for="item in weekList">{{ item.name }}</div>
            </div>
            <div class="calendar-content">
              <div :class="[item.className]" v-for="item in dayList">
                <div class="day">{{ item.day }}</div>
                <div class="day-value">{{ item.value.Sum || '' }}</div>
              </div>
            </div>
          </div>
          <div class="divider"></div>
          <div class="right">
            <el-table
                height="100%"
                :data="alertList"
                tooltip-effect="dark"
                style="width: 100%">
              <el-table-column
                  prop="Timestamp"
                  :label="$t('Time')">
              </el-table-column>
              <el-table-column
                  prop="Id"
                  :label="$t('Id')">
              </el-table-column>
              <el-table-column
                  prop="Translator"
                  :label="$t('Translator')">
              </el-table-column>
              <el-table-column
                  prop="Mailbox"
                  :label="$t('Mailbox')">
              </el-table-column>
              <el-table-column
                  prop="Type"
                  :label="$t('Type')">
              </el-table-column>
              <el-table-column
                  prop="New"
                  :label="$t('New')">
              </el-table-column>
              <el-table-column
                  prop="Sum"
                  :label="$t('Sum')">
              </el-table-column>
            </el-table>
          </div>
          <div class="divider horizontal">

          </div>
          <div class="total">
            Total Balance:
            <div class="balance-value">$ {{ totalBalance }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Page',
  computed: {
    routeName() {
      return this.$route.name
    },
    totalBalance() {
      return '0.00'
    }
  },
  data() {
    return {
      year: new Date().getFullYear(),
      date: new Date(),
      month: new Date().getMonth() + 1,
      dayList: [],
      dayDialog: false,
      monthList: [
        {
          id: 1,
          name: 'Jan'
        },
        {
          id: 2,
          name: 'Feb'
        },
        {
          id: 3,
          name: 'Mar'
        },
        {
          id: 4,
          name: 'Apr'
        },
        {
          id: 5,
          name: 'May'
        },
        {
          id: 6,
          name: 'Jun'
        },
        {
          id: 7,
          name: 'Jul'
        },
        {
          id: 8,
          name: 'Aug'
        },
        {
          id: 9,
          name: 'Sep'
        },
        {
          id: 10,
          name: 'Oct'
        },
        {
          id: 11,
          name: 'Nov'
        },
        {
          id: 12,
          name: 'Dec'
        }
      ],
      weekList: [
        {
          id: 1,
          name: 'Mon'
        },
        {
          id: 2,
          name: 'Tue'
        },
        {
          id: 3,
          name: 'Wed'
        },
        {
          id: 4,
          name: 'Thu'
        },
        {
          id: 5,
          name: 'Fri'
        },
        {
          id: 6,
          name: 'Sat'
        },
        {
          id: 7,
          name: 'Sun'
        }
      ],
      balacneMap: {},
      alertList: []
    }
  },
  methods: {
    showPermission(id) {
      return true
      return this.$store.getters.permission.indexOf(id) > -1
    },
    handleRouterJump(path) {
      if (this.$route.fullPath !== path) {
        this.$router.push({
          path
        })
      }
    },
    handleDropdown(item) {
      this.$router.push({
        path: '/' + item
      })
    },
    async handleLogout () {
      await this.$store.dispatch('user/logout')
      await this.$router.push({
        path: '/login'
      })
    },
    handleChangeMonth(month) {
      this.month = month
      this.dayList = this.getCalendarData(this.year,this.month)
    },
    // 编写一个方法，通过指定年月，获取当月的日历数据，请使用二维数组，从周一开始，周日结束，每周7天，如果每日时间大于今年今日，则禁用
    getCalendarData(year, month) {
      let result = []
      const date = new Date()
      date.setFullYear(year, month - 1, 1)
      let week = date.getDay()
      // 获取一个月的总天数
      let days = new Date(year, month, 0).getDate()

      console.log(week, days)
      week--
      let dayValue = 1

      if (week > 0) {
        days = days - (7 - week)

        let arr = []
        for (let i = 0; i < week; i++) {
          arr.push({
            day: i,
            month: '',
            year: '',
            value: {},
            className: 'day-card empty',
            disabled: false
          })
        }
        for (let i = 0; i < 7 - week; i++) {
          arr.push({
            day: dayValue,
            month: month,
            year: year,
            value: this.balacneMap[`${year}-${month > 9 ? month : '0' + month}-${dayValue > 9 ? dayValue : '0' + dayValue}`] || {},
            className: this.compareDate(year, month, dayValue) ? 'day-card future': 'day-card'
          })
          dayValue++
        }
        result.push(arr)
      }

      let weekNum = Math.floor(days / 7)
      while(weekNum > 0) {
        let arr2 = []
        for (let i = 0; i < 7; i++) {

          arr2.push({
            day: dayValue,
            month: month,
            year: year,
            value: this.balacneMap[`${year}-${month > 9 ? month : '0' + month}-${dayValue > 9 ? dayValue : '0' + dayValue}`] || {},
            className: this.compareDate(year, month, dayValue) ? 'day-card future': 'day-card'
          })
          dayValue++
        }
        result.push(arr2)
        weekNum--
      }
      let _days = days % 7
      let arr3 = []
      for (let i = 0; i < _days; i++) {
        arr3.push({
          day: dayValue,
          month: month,
          year: year,
          value: this.balacneMap[`${year}-${month > 9 ? month : '0' + month}-${dayValue > 9 ? dayValue : '0' + dayValue}`] || {},
          className: this.compareDate(year, month, dayValue) ? 'day-card future': 'day-card'
        })
        dayValue++
      }
      result.push(arr3)
      // 展开二维数组
      result = result.flat()
      return result
    },
    // 比较年月日是否大于当日
    compareDate(year, month, day) {
      const date = new Date()
      const currentYear = date.getFullYear()
      const currentMonth = date.getMonth() + 1
      const currentDay = date.getDate()
      if (year > currentYear) {
        return true
      } else if (year === currentYear) {
        if (month > currentMonth) {
          return true
        } else if (month === currentMonth) {
          if (day > currentDay) {
            return true
          }
        }
      }
      return false
    },
    handleOpenBalance() {
      this.dayDialog = true
      this.$http.getUserBalance().then(res => {
        console.log(res)
        this.balacneMap = res
        this.handleChangeMonth(this.month)
      })
      this.$http.getUserAlert().then(res => {
        this.alertList = res
      })
    }
  },
  components: {
  }
}
</script>
<style lang="scss">
.page {
  height: 100%;
  padding: 0 1.786rem 1.786rem;
  background-color: #0e222e;
  display: flex;
  flex-direction: column;
  .day-dialog-box {
    padding: 0.571rem;
    .divider {
      outline: 1px solid #122A3A;
    }
    .horizontal {
      grid-column: 1/4;
      height: 0;
    }
    .total {
      display: flex;
      grid-column: 1/4;
      gap: 1.429rem;
      align-items: center;
      height: 2.286rem;
      margin-bottom: 0.286rem;
      padding: 0 0.786rem;
      color: #bdeaff;
      font-size: 1.143rem;
      font-weight: 600;
      .balance-value {
        display: flex;
        gap: 0.286rem;
        align-items: center;
        height: 100%;
        justify-content: center;
        width: 8.429rem;
        background: #112734;
        border-radius: 0.571rem;
      }
    }
    .year-list {
      display: flex;
      gap: 0.286rem;
      align-items: center;
      width: 100%;
      height: 100%;
      .year {
        height: 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        border-radius: 0.571rem;
        color: #d5d5d5;
        font-weight: 400;
        gap: 1.071rem;
        justify-content: center;
        background: #0E202B;
        padding: 1.571rem;
        color: #628196;
        font-size: 1.143rem;
        font-weight: 600;
        text-align: center;
      }
      .month-list {
        display: flex;
        flex-grow: 1;
        align-items: center;
        height: 100%;
        padding: 0.571rem;
        border-radius: 0.857rem;
        background-color: #0e222e;
        .month {
          color: #bdeaff;
          display: flex;
          flex-grow: 1;
          align-items: center;
          justify-content: center;
          height: 100%;
          cursor: pointer;
          border-radius: 0.571rem;
          font-size: 1.143rem;
          font-weight: 600;
          &.active {
            background-color: #1a384b;
          }
        }
      }
    }
    .year-header {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 0.357rem;
      height: 4.571rem;
      margin-bottom: 10px;
    }
    .day-content {
      display: flex;
      flex-direction: column;
      gap: 0.714rem;
      width: 100%;
      height: 100%;
      padding: 0.571rem;
      overflow: hidden;
      border-radius: 1.143rem;
      background-color: #0e202c;
      display: grid;
      grid-template-columns: 1fr auto 42.286rem;
      gap: 0.857rem;
      .left {
        position: relative;
        display: grid;
        grid-template-rows: auto 1fr;
        width: 100%;
        overflow: hidden;
        gap: 0.286rem;
        height: 40rem;
      }
      .right {
        height: 40rem;
      }
      .calendar-header {
        display: grid;
        grid-template-columns: repeat(7,1fr);
        width: 100%;
        grid-column-gap: 0.286rem;
        height: 2.786rem;
        .header-item {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          border-radius: 0.143rem;
          background-color: #122a3a;
          color: #bdeaffb5;
          font-size: 1.143rem;
          font-weight: 500;
          letter-spacing: .01rem;
          border-radius: 0.571rem 0.143rem 0.143rem;
        }
      }
      .calendar-content {
        display: grid;
        grid-template-columns: repeat(7,1fr);
        gap: 0.571rem;
        height: 100%;
        overflow: auto;
        gap: 0.286rem;
        border-radius: initial;
        scrollbar-gutter: initial;
        .day-card {
          height: 5.357rem;
          display: grid;
          grid-template-rows: 1fr auto;
          gap: 0.714rem;
          padding: 0.929rem 0.286rem 0.5rem;
          opacity: .6;
          border-radius: 0.143rem;
          background-color: #122a3a;
        }
        .day-card.empty {
          opacity: 0;
        }
        .day-card.future {
          pointer-events: none;
          opacity: .1;
        }
        .day {
          padding: 0 1.143rem 0 0.571rem;
          font-size: 1.143rem;
          font-weight: 500;
          line-height: 100%;
          color: #ffffff;
        }
        .day-value {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 2rem;
          border-radius: 0.357rem;
          background-color: #274152;
        }
      }
    }
  }
  .top {
    flex-shrink: 0;
    display: flex;
    gap: 0.286rem;
    align-items: center;
    justify-content: center;
    .top_logo {
      display: flex;
      align-items: center;
      justify-content: center;
      height: min(4rem,2.917vw);
      border-radius: 0 0 min(0.571rem,0.417vw) min(0.571rem,0.417vw);
      background: #122A3A;
      padding: 0.571rem 0.857rem;
    }
    .top_content {
      flex-grow: 1;
      gap: min(0.571rem,0.417vw);
      padding: 0.571rem 1.714rem 0.571rem 0.571rem;
      display: flex;
      align-items: center;
      justify-content: center;
      height: min(4rem,2.917vw);
      border-radius: 0 0 min(0.571rem,0.417vw) min(0.571rem,0.417vw);
      background: #122A3A;
    }
    .top_content_left {
      display: flex;
      gap: min(1.786rem,1.302vw);
      margin-right: auto;
    }
    .top_menu_list {
      display: flex;
      gap: min(0.571rem,0.417vw);
      align-items: center;
    }
    .top_menu_item {
      cursor: pointer;
      .selected-item {
        background-color: transparent;
        width: 100%;
        height: 0.215rem;
        border-radius: 1px;
        margin-top: 2px;
      }
      &.active {
        .selected-item {
          background-color: #2f677e;
        }
      }
    }
    .top_content_balance {
      display: flex;
      gap: 1.071rem;
      .balance_box {
        color: #67cae8;
        font-family: Inter,sans-serif;
        font-size: 1.214rem;
        font-weight: 700;
        letter-spacing: .01rem;
        padding: 0.857rem 2.786rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.571rem;
        background: #0E222E;
        box-shadow: 0 0 0.929rem #67cae840;
      }
      .balance_icon {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.571rem;
        background: #0E222E;
        box-shadow: 0 0 0.929rem #67cae840;
        padding: 0.286rem 0.5rem 0.286rem 0.286rem;
        cursor: pointer;
      }
    }
    .top_content_right {
      display: flex;
      gap: min(1.143rem,0.833vw);
      align-items: center;
      margin-left: auto;
    }
  }
  .main {
    flex-grow: 1;
    padding: min(0.571rem,0.417vw) 0 min(1.786rem,1.302vw) 0;
    background-color: #0e222e;
  }
}
</style>
